<template>
    <div style="overflow: hidden;">
        <div id="login-wrapper">

            <div style="width: 100%; height: 100px;margin-bottom: 50px;">
                <img style="width: 80px;height: 80px;margin-top: 50px; float: left;margin-left: calc(30%);"
                    src="@/assets/logo1.png" alt="logo" />
                <span style="font-size: 60px;float: left;margin-top: 60px;color: #615CED;">HChat</span>
            </div>

            <br>
            <el-input class="input-box" v-model="loginForm.email" style="width: 70%;margin-bottom: 3%;"
                placeholder="请输入登录邮箱" clearable>
                <template v-slot:prepend>邮箱</template>
            </el-input>
            <el-input class="input-box" v-model="loginForm.password" style="width: 70%;" type="password"
                placeholder="请输入密码" show-password clearable>
                <template v-slot:prepend>密码</template>
            </el-input>
            <br>
            <el-button @click="login"
                style="margin-top: 30px;width: 70%;height: 50px;border-radius: 30px;background-color: #544BD2;color: #fff;font-size: 18px;">
                登 录
            </el-button>
            <br>
            <el-button @click="wechatLogin"
                style="margin-top: 30px;width: 70%;height: 50px;border-radius: 30px;background-color: #544BD2;color: #fff;font-size: 18px;">
                微信扫码登录
            </el-button>

            <br>
            <br>
            <a href="#/register" style="">没有账号,去注册</a>
            <!-- <a href="#" style="margin-left: 10px;">忘记密码</a> -->
        </div>


        <el-dialog @close="qrClose" v-if="wechatQRCodeVisible" append-to-body v-model="wechatQRCodeVisible" title="微信登录" width="50%"
            style="">
            <h1 style="color: #000;text-align: center;">请打开微信扫码登录</h1>
            <img style="width: 30%;margin-left: 35%;" id="qrcode" src="" alt="qr_code">

            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="qrClose">
                        关闭
                    </el-button>
                </div>
            </template>
        </el-dialog>

        <el-dialog v-if="bindEmailVisible" append-to-body v-model="bindEmailVisible" title="绑定邮箱账号" width="50%"
            style="">

            <el-input class="input-box" v-model="bindEmailForm.email"
                style="width: 70%;margin-left: 15%;margin-bottom: 3%;" placeholder="请输入邮箱" clearable>
            </el-input>
            <el-input type="password" show-password clearable class="input-box" v-model="bindEmailForm.password"
                style="width: 70%;margin-left: 15%;margin-bottom: 3%;" placeholder="请输入密码">
            </el-input>

            <br>



            <template #footer>
                <div class="dialog-footer">
                    <el-button type="primary" @click="bind">
                        绑定该账号
                    </el-button>
                    <el-button type="primary" @click="bindEmailVisible = false">
                        关闭
                    </el-button>
                </div>
            </template>
        </el-dialog>




    </div>
</template>

<script>
import { login, getQRCode, checkQRCode, bindEmailAndWechat } from '../api/user'

export default {
    data() {
        return {
            loginForm: {
                email: '',
                password: ''
            },
            wechatQRCodeVisible: false,
            qrCheckInterval: null, // 用于存储定时器的引用

            bindEmailVisible: false,
            // bindEmailVisible: true,

            bindEmailForm: {
                email: '',
                password: '',
                time: ''
            }
        }
    },
    methods: {
        login() {
            if (this.loginForm.email.length == 0 || this.loginForm.password.length == 0) {
                this.$message.warning('邮箱或密码不能为空')
                return
            }

            //正则表达式检验邮箱格式 
            if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(this.loginForm.email)) {
                this.$message.warning('邮箱格式不正确')
                return
            }
            login(this.loginForm).then(res => {
                console.log(res);
                if (res.code == 1) {
                    this.$message.success('登录成功')
                    localStorage.setItem('token', res.data.token)
                    this.$router.push('/')
                } else {
                    this.$message.error(res.msg)
                }
            })
        },
        wechatLogin() {
            this.wechatQRCodeVisible = true
            getQRCode().then(res => {
                console.log(res);
                const qrImage = document.getElementById('qrcode');
                const imageUrl = URL.createObjectURL(res.data);
                // 设置 img 元素的 src 为 imageUrl
                qrImage.src = imageUrl;
                //获取请求头:currentTime
                console.log(res.headers);
                const time = res.headers.currenttime
                this.bindEmailForm.time = time
                this.checkQRStatus(time);
            })

            // window.location.href = 'http://localhost:1145/wxLogin'
        },

        qrClose(){
            // this.$message.warning('close')
            this.wechatQRCodeVisible = false
            this.stopQRCheck()
        },

        checkQRStatus(time) {
            // 轮询检测二维码扫描状态 3s
            this.qrCheckInterval = setInterval(() => {
                checkQRCode(time).then((res) => {
                    console.log(res);
                    if (res.code === 1) {
                        this.$message.success('登录成功');
                        this.stopQRCheck(); // 停止轮询
                        localStorage.setItem('token', res.data.token)
                        this.$router.push('/');
                    } else {
                        if (res.msg === 'unscanned') {
                            // this.$message.warning(res.msg);
                            return;
                        } else {
                            this.$message.warning(res.msg);
                            this.stopQRCheck();
                            this.bindEmailVisible = true;
                        }

                    }
                });
            }, 3000);
        },
        // 清除定时器
        stopQRCheck() {
            if (this.qrCheckInterval) {
                clearInterval(this.qrCheckInterval); 
                this.qrCheckInterval = null; 
            }
        },

        bind() {
            bindEmailAndWechat(this.bindEmailForm).then(res => {
                console.log(res);
                if (res.code == 1) {
                    this.bindEmailVisible = false
                    this.$message.success('绑定成功,即将跳转到首页')
                    localStorage.setItem('token', res.data.token)
                    //休眠2秒
                    setTimeout(() => {
                        this.$router.push('/')
                    }, 2000);
                } else {
                    this.$message.error(res.msg)
                }
            })
            // this.$message.success('绑定账号')
        },
        
    }


}
</script>

<style scoped>
#login-wrapper {
    width: 40%;
    height: 50vh;
    margin-left: 30%;
    margin-top: 20vh;
    border-radius: 20px;
    /* border: 1px red solid; */
    background-color: #fff;
}

.input-box {
    height: 50px;
    border-radius: 10px;
    position: relative;
}

/deep/ .el-input {
    --el-input-border-radius: 15px;
    /* --el-input-border: none; */
    /* --el-input-border-color: none; */
    /* --el-input-hover-border-color: none;*/
    --el-input-focus-border-color: #C0C4CC;

}

/deep/ .el-input__inner {
    font-size: 18px;
    margin-left: 30px;
}

/deep/ .el-input-group__prepend {
    background-color: #fff;
    color: #000;
}
</style>